<template>
	<div class="seller" ref="seller">
		<div class="seller-content">
			<div class="overview">
				<h1 class="title">{{seller.name}}</h1>
				<div class="desc border-1px">
					<star :size="36" :score="seller.score"></star>
					<span class="text">{{seller.ratingCount}}</span>
					<span class="text">月售 {{seller.sellCount}}</span>
				</div>
				<ul class="remark">
					<li class="block">
						<h2>起送价</h2>
						<div class="content">
							<span class="stress">{{seller.minPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>商家配送</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryPrice}}</span>元
						</div>
					</li>
					<li class="block">
						<h2>平均配送时间</h2>
						<div class="content">
							<span class="stress">{{seller.deliveryTime}}</span>分钟
						</div>
					</li>
				</ul>
				<div class="favorite" @click="toggleFavorite($event)">
					<span class="icon-favorite" :class="{'active':favorite}"></span>
					<span class="text">{{favoriteText}}</span>
				</div>
			</div>
			<split></split>
			<div class="bulletin">
				<h1 class="title">公告与活动</h1>
				<div class="content-wraper border-1px">
					<p class="content">{{seller.bulletin}}</p>
				</div>
				<ul class="supports" v-if="seller.supports">
					<li class="supports-item border-1px" v-for="(item, index) in seller.supports">
						<span class="icon" v-bind:class="classMap[index]"></span>
						<span class="text">{{seller.supports[index].description}}</span>
					</li>
				</ul>
			</div>
			<split></split>
			<div class="pics">
				<h1 class="title">商家实景</h1>
				<div class="pic-wraper" ref="picWraper">
					<ul class="pic-list" ref="picList">
						<li class="pic-item" v-for="(pic,index) in seller.pics">
							<img :src="pic" alt="" width="120" height="90" />
						</li>
					</ul>
				</div>
			</div>
			<split></split>
			<div class="info">
				<h1 class="title border-1px">商家信息</h1>
				<ul>
					<li v-for="(info,index) in seller.infos" class="info-item">
						{{info}}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">
	import { saveToLocal, loadFromLocal } from '../../common/js/storage.js';
	import BScroll from 'better-scroll';
	import star from '../star/star.vue';
	import split from '../split/split.vue';

	export default {
		props: {
			seller: {
				type: Object
			}
		},
		data() {
			return {
				favorite: (() => {
					return loadFromLocal(this.seller.id, 'favorite', false);
				})()
			};
		},
		computed: {
			favoriteText() {
				return this.favorite ? '已收藏' : '未收藏';
			}
		},
		created() {
			this.classMap = ['decrease', 'discount', 'special', 'invoice', 'guarantee'];
		},
		watch: {
			'seller' () {
				this._initScroll();
				this._initPics();
			}
		},
		mounted() {
			this.$nextTick(() => {
				this._initScroll();
				this._initPics();
			});
		},
		methods: {
			toggleFavorite(event) {
				if(!event._constructed) {
					return;
				}
				this.favorite = !this.favorite;
				saveToLocal(this.seller.id, 'favorite', this.favorite);
			},
			_initScroll() {
				if(!this.scroll) {
					this.scroll = new BScroll(this.$refs.seller, {
						click: true
					});
				} else {
					this.scroll.refresh();
				}
			},
			_initPics() {
				if(this.seller.pics) {
					let picWidth = 120;
					let margin = 6;
					let width = (picWidth + margin) * this.seller.pics.length - margin;
					this.$refs.picList.style.width = width + 'px';
					if(!this.picScroll) {
						console.log(this.$refs.picWraper);
						this.picScroll = new BScroll(this.$refs.picWraper, {
							scrollX: true,
							eventPassthrough: 'vertical'
						});
					} else {
						this.picScroll.refresh();
					}
				}
			}
		},
		components: {
			'star': star,
			'split': split
		}
	};
</script>

<style lang="less">
	@import '../../common/less/z.less';
	@import '../../common/less/css3.less';
	@import '../../common/less/appstyle.less';
	.seller {
		.pos(a);
		top: 174px;
		bottom: 0;
		left: 0;
		width: 100%;
		overflow: hidden;
		.overview {
			.pos(r);
			padding: 18px;
			.title {
				margin-bottom: 8px;
				line-height: 14px;
				color: rgb(7, 17, 27);
				.font-s14();
			}
			.desc {
				padding-bottom: 18px;
				line-height: 18px;
				.font-s0();
				.border-1px(rgba(7, 17, 27, .1));
				.star {
					.d-ib();
					vertical-align: top;
					margin-right: 8px;
				}
				.text {
					.d-ib();
					vertical-align: top;
					line-height: 18px;
					margin-right: 12px;
					.font-s10();
					color: rgb(77, 85, 93);
				}
			}
			.remark {
				display: flex;
				padding-top: 18px;
				.block {
					flex: 1;
					.tc();
					border-right: 1px solid rgba(7, 17, 27, .1);
					&:last-child {
						border: none;
					}
					h2 {
						margin-bottom: 4px;
						line-height: 10px;
						.font-s10();
						color: rgb(147, 153, 159);
					}
					.content {
						line-height: 24px;
						.font-s10();
						.font-wb();
						color: rgb(7, 17, 27);
						.stress {
							.font-s24();
						}
					}
				}
			}
			.favorite {
				.pos(a);
				right: 18px;
				top: 18px;
				.tc();
				.icon-favorite {
					margin-bottom: 4px;
					.d-b();
					line-height: 24px;
					.font-s24();
					color: #d4d6d9;
					&.active {
						color: rgb(240, 20, 20);
					}
				}
				.text {
					line-height: 10px;
					.font-s10();
					color: #d4d6d9;
				}
			}
		}
		.bulletin {
			padding: 18px 18px 0 18px;
			.title {
				margin-bottom: 8px;
				line-height: 14px;
				color: rgb(7, 17, 27);
				.font-s14();
			}
			.content-wraper {
				padding: 0 12px 16px 12px;
				.border-1px(rgba(7, 17, 27, .1));
				.content {
					line-height: 24px;
					.font-s12();
					color: rgb(240, 20, 20);
				}
			}
			.supports {
				.supports-item {
					padding: 16px 12px;
					.border-1px(rgba(7, 17, 27, .1));
					&.last-child {
						border: none;
					}
				}
				.icon {
					.d-ib();
					.wh(16px);
					margin-right: 6px;
					.bg-sz(16px, 16px);
					.bgr-no();
					&.decrease {
						.bg-image('../../../resource/img/decrease_1@2x.png', '../../../resource/img/decrease_1@3x.png');
					}
					&.discount {
						.bg-image('../../../resource/img/discount_1@2x.png', '../../../resource/img/discount_1@3x.png');
					}
					&.guarantee {
						.bg-image('../../../resource/img/guarantee_1@2x.png', '../../../resource/img/guarantee_1@3x.png');
					}
					&.invoice {
						.bg-image('../../../resource/img/invoice_1@2x.png', '../../../resource/img/invoice_1@3x.png');
					}
					&.special {
						.bg-image('../../../resource/img/special_1@2x.png', '../../../resource/img/special_1@3x.png');
					}
				}
				.text {
					line-height: 16px;
					.font-s12();
					color: rgb(7, 17, 27);
				}
			}
		}
		.pics {
			padding: 18px;
			.title {
				margin-bottom: 12px;
				line-height: 14px;
				color: rgb(7, 17, 27);
				.font-s14();
			}
			.pic-wraper {
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				.pic-list {
					.font-s0();
					.pic-item {
						.d-ib();
						margin-right: 6px;
						width: 120px;
						height: 90px;
						&:last-child {
							margin: 0;
						}
					}
				}
			}
		}
		.info {
			padding: 18px 18px 0 18px;
			.title {
				margin-bottom: 12px;
				line-height: 14px;
				.border-1px(rgba(7, 17, 27, .1));
				color: rgb(7, 17, 27);
				.font-s14();
			}
			.info-item {
				padding: 16px 12px;
				line-height: 16px;
				.border-1px(rgba(7, 17, 27, .1));
				color: rgb(7, 17, 27);
				.font-s12();
				&.last-child {
					border: none;
				}
			}
		}
	}
</style>